<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>门诊缴费</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="yes" name="apple-touch-fullscreen">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no,email=no" name="format-detection">
		<!--[if lt IE 9]> 
		<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
		<![endif]-->
		<script type="text/javascript" src="../../js/init.js"></script>
		<link rel="stylesheet" href="../../font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<script type="text/javascript" src="../../font/iconfont.js"></script>
		<style>
			html {
				width: 100%;
				height: 100%;
				background-color: #f6f6f6;
			}
			.contain {
				box-sizing: border-box;
				font-size: 0.3rem;
				position: relative;
			}
			#btns {
				position: absolute;
				font-size: 0.3rem;
				width: 100%;
				height: 0.6rem;
				border-bottom: 1px solid #dbdbdb;
			}
			
			#btns text {
				display: inline-block;
				position: absolute;
				width: 50%;
				height: 0.6rem;
				line-height: 0.6rem;
				text-align: center;
				font-size: 0.3rem;
			}
			#btns #left {
				left: 0;
			}
			#btns #right {
				right: 0;
			}
			.color {
				color: #2fabd4;
				border-bottom: 2px solid #428bca;
			}
			#divs {
				padding-top: 0.6rem;
				
			}
			
			#divs .div  {
				display: none;
			}
			#divs .div .con {
				margin: 0.3rem 0.24rem 0;
				background-color: #fff;
				border-radius: 0.1rem;
			}
			.T {
				position: relative;
				border-bottom: 1px solid #e5e5e5;
			}
			.T text {
				line-height: 0.7rem;
				height: 0.7rem;
			}
			.T .left {
				padding-left: 0.2rem;
				color: #1388d2;
				
			}
			.T .iconfont {
				position: absolute;
				right: 3.4rem;
				color: #999;
			}
			.T .time {
				position: absolute;
				right: 0.12rem;
				color: #999;
			}
			.C {
				padding: 0.14rem 0.2rem 0.36rem; 
				position: relative;
				color: #333;
			}
			.C text {
				height: 0.5rem;
				line-height: 0.5rem;
				display: block;
			}
			.C .time {
				color: #999;
			}
			.C .price {
				position: absolute;
				right: 0.2rem;
				top: 1rem;
				color: #ec6941;
			}
		</style>
		<script type="text/javascript">
			 window.onload = function() {
            var btns = document.getElementById("btns").getElementsByTagName("text");
            var divs = document.getElementById("divs").getElementsByClassName("div");
            for (var i = 0; i < btns.length; i++) {
                btns[i].index = i; //自定义属性，用于关联下面的大盒子
                btns[i].onclick = function() {

                    for (var j = 0; j < btns.length; j++) {
                        //把所有的button清空类名
                        btns[j].className = "";
                    }
                    //点击的那个盒子添加指定类名
                    this.className = "color";
                    for (var i = 0; i < divs.length; i++) {
                        //先让底下的div全部隐藏
                        divs[i].style.display = "none";
                    }
                    //然后给当前所点击按钮相关联的盒子添加指定属性
                    divs[this.index].style.display = "block";
                }
            }
        }
		</script>
	</head>
	<body>
		<header>
			<span></span>
			<text class="title">门诊缴费</text>
			<text class="iconfont icon-llmainpageback" id="back"></text>
			<text class="iconfont icon-iconfontclosesmall"></text>
			<text class="iconfont icon-gengduo"></text>
		</header>
		 <section class="contain">
	        <div id="btns">
	            <text class="color" id="left">待支付</text>
	            <text id="right">已支付</text>
	        </div>
	        <div id="divs">
	            	<div class="div" style="display: block;">
	            		<div class="con">
	            			<div class="T">
			            		<text class="left">门诊处方</text>
			            		<text class="iconfont icon-shijian"></text>
			            		<text class="time">就诊日期：2017-06-13</text>
			            	</div>
			            	<div class="C">
				            	<text class="Hospital">就诊院区：总院</text>
				            	<text class="ofice">就诊科室：外科</text>
				            	<text class="person">就诊人：崔雪飞</text>
				            	<text class="time">2017-06-13 10:20:35</text>
				            	<text class="price">￥14</text>
				            </div>
	            		</div>
	            	</div>
	            	<div class="div">
	            		<div class="con">
	            			<div class="T">
			            		<text class="left">门诊处方</text>
			            		<text class="iconfont icon-shijian"></text>
			            		<text class="time">就诊日期：2017-06-13</text>
			            	</div>
			            	<div class="C">
				            	<text class="Hospital">就诊院区：总院</text>
				            	<text class="ofice">就诊科室：外科</text>
				            	<text class="person">就诊人：崔雪飞</text>
				            	<text class="time">2017-06-13 10:20:35</text>
				            	<text class="price">￥14</text>
				            </div>
	            		</div>
	            	</div>
	        </div>
	    </section>
	</body>
	<script type="text/javascript">
		var htmlC = document.getElementById("divs").getElementsByClassName("div")[0].innerHTML;
//		console.log(htmlC)
		for (var i = 0;i < 2;i++) {
			htmlC += '<div class="con">'+
						'<div class="T">'+
		            		'<text class="left">门诊处方</text>'+
		            		'<text class="iconfont icon-shijian"></text>'+
		            		'<text class="time">就诊日期：2017-06-13</text>'+
		            	'</div>'+
		            	'<div class="C">'+
			            	'<text class="Hospital">就诊院区：总院</text>'+
			            	'<text class="ofice">就诊科室：外科</text>'+
			            	'<text class="person">就诊人：崔雪飞</text>'+
			            	'<text class="time">2017-06-13 10:20:35</text>'+
			            	'<text class="price">￥14</text>'+
			           ' </div>'+
			           '</div>'
					}
//		console.log(htmlC)
		document.getElementById("divs").getElementsByClassName("div")[0].innerHTML = htmlC;
		document.getElementById("back").onclick = function(){
			window.history.back(-1);
		}
	</script>
</html>
